import { Button, Card, Divider, message, Select, Table } from "antd";
import React, { useEffect } from "react";
import { useState } from "react/cjs/react.development";
import { pageRequest } from "../../../../utils/pageRequest";
import {
  getFiles,
  getCities,
  getTypes,
} from "../../../../service/filedownload";

const { Option } = Select;

const style = {
  width: "15%",
  marginRight: "10px",
};

function DataDownload() {
  const Headers = [
    {
      title: "序号",
      key: "id",
      width: "7%",
      align: "center",
      render: (txt, record, index) => index + 1,
    },
    {
      title: "文件名",
      dataIndex: "fileName",
      // width: "20%",
      align: "center",
    },
    {
      title: "更新时间",
      dataIndex: "updateTime",
      width: "15%",
      align: "center",
    },
    {
      title: "文件大小",
      dataIndex: "size",
      width: "15%",
      align: "center",
    },
    {
      title: "来源",
      dataIndex: "source",
      width: "10%",
      align: "center",
    },
    {
      title: "下载",
      dataIndex: "download",
      width: "15%",
      align: "center",
      render: (txt, record, index) => {
        return (
          <Button
            type="primary"
            size="middle"
            onClick={() => {
              if (!record.link) {
                message.error("下载失败，请检查资源是否存在");
                return false;
              }
              window.open(record.link);
            }}
          >
            下载
          </Button>
        );
      },
    },
  ];
  const [cityList, setCityList] = useState(["北京", "武汉"]);
  const [Type, setType] = useState(["POI", "AOI"]);
  const [total, setTotal] = useState(10);
  const [dataSource, setDataSource] = useState([
    {
      fileName: "武汉汽车",
      updateTime: "2021-9-12",
      size: "17M",
      source: "高德",
    },
    {
      fileName: "武汉餐饮",
      updateTime: "2021-9-12",
      size: "17M",
      source: "高德",
      link: "http://www.baidu.com",
    },
  ]);

  useEffect(() => {
    getCities()
      .then((res) => {
        if (res.status === "200") {
          setCityList(res.result);
        } else {
          message.error("城市列表获取出错");
        }
      })
      .catch((err) => {
        console.log("DataDownload_cities获取出错" + err);
      });
    getTypes()
      .then((res) => {
        if (res.status === "200") {
          setType(res.result);
        } else {
          message.error("大类列表获取出错");
        }
      })
      .catch((err) => {
        console.log("DataDownload_types获取出错" + err);
      });
  }, []);
  return (
    <>
      <Card>
        <div className="Selector">
          城市：
          <Select
            showSearch
            style={style}
            placeholder="Select a person"
            optionFilterProp="children"
          >
            {cityList.map((cityName) => {
              return <Option value={cityName}>{cityName}</Option>;
            })}
          </Select>
          大类：
          <Select
            showSearch
            style={style}
            placeholder="Select a person"
            optionFilterProp="children"
          >
            {Type.map((type) => {
              return <Option value={type}>{type}</Option>;
            })}
          </Select>
          <Button type="primary" style={{ marginLeft: "20px" }} size="middle">
            搜索
          </Button>
        </div>
        <Divider />
        <Table
          rowKey="title"
          columns={Headers}
          dataSource={dataSource}
          bordered={true}
          pagination={{
            total: total,
            pageSize: 10,
            onChange: (page, pageSize) =>
              pageRequest(page, pageSize, getFiles, setDataSource, setTotal),
          }}
        />
      </Card>
    </>
  );
}

export default DataDownload;
